<template>
  <h1>稿件管理页面</h1>
  <!--内容列表开始-->
  <el-table :data="contentArr">
    <el-table-column type="index" label="编号" width="60px"></el-table-column>
    <el-table-column class="title_p" prop="title" label="标题" width="150px"></el-table-column>
    <el-table-column label="封面" width="80px">
      <template #default="scope">
        <img :src="scope.row.coverUrl" style="width: 75px">
      </template>
    </el-table-column>
    <el-table-column prop="clickCount" label="浏览量"></el-table-column>
    <el-table-column prop="collectCount" label="收藏量"></el-table-column>
    <el-table-column prop="commentCount" label="评论量"></el-table-column>
    <el-table-column label="审核状态">
      <template #default="scope">
        <el-button type="info" v-if="scope.row.checkState==0">未审核</el-button>
        <el-button type="success" v-if="scope.row.checkState==1">审核通过</el-button>
        <el-button type="danger" v-if="scope.row.checkState==2">审核未通过</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="gmtCreate" label="发布时间" width="100px"></el-table-column>
    <el-table-column label="操作" width="180px" fixed="right">
      <template #default="scope">
        <el-button type="success" @click="update(scope.row)">编辑</el-button>
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="total, prev, pager, next, jumper"
                 :total="totalVideos" :page-size="20"
                 :current-page.sync="currentPage" @current-change="handlePageChange"/>
</template>

<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";
import tokenAxios from "@/http/request/TokenAxios";
import {ElMessage} from "element-plus";
const contentArr = ref([])
const user =ref(getUser())

const currentPage = ref(1);

const totalVideos = ref(0);
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
  videoListByAuthorId();
};
const videoListByAuthorId =()=>{
  tokenAxios.get(`http://124.71.182.39:26000/video/user/${user.value.id}/videoList?page=${currentPage.value}`)
      .then((response)=>{
        console.log(response);
        if (response.data.state=20000){
          // if (response.data.data.length === 0) {
          //   // 数据库中没有更多数据了，停止发送请求
          //   return;
          // }
          // videoArr.value += response.data.data;
          contentArr.value = contentArr.value.concat(response.data.list);
          console.log(contentArr.value)
        }else {
          ElMessage.error(response.data.message)
        }

      })
}
onMounted(()=>{
  if (user==null){
    alert("请先登录!");
    router.push('/login');
  }
  console.log(user.value)
  videoListByAuthorId();
})

const del=(i,c)=>{
  if (confirm("您确认删除此内容吗?")){
    tokenAxios.post(`http://124.71.182.39:26000/video/delete?videoId=${c.id}`)
        .then((response)=>{
          if (response.state===20000){
            ElMessage.success("删除成功!");
            contentArr.value.splice(i,1);//删除数组里面的数据
            //刷新页面
          }
        })
  }
}
const update=(c)=>{
  //跳转到发布页面并把内容id传递过去
  router.push('/personal/post?id='+c.id);
}

</script>

<style scoped>

.title_p {
  font-weight: bold;
  overflow: hidden; /*超出不显示*/
  /*设置省略号相关样式*/
  display: -webkit-box;
  -webkit-line-clamp: 2; /*设置行数*/
  -webkit-box-orient: vertical; /*纵向*/
}
</style>

